<template>
	<view class="content" :style="theme">
		<view class="head">
			<u-icon name="arrow-leftward" color="#333333" size="32rpx" @click="monthBtn(1)"></u-icon>
			<text>{{month}}</text>
			<u-icon name="arrow-rightward" color="#333333" size="32rpx" @click="monthBtn(2)"></u-icon>
		</view>
		<view class="weekList">
			<view v-for="(item, index) in weekList" :key="index">{{item}}</view>
		</view>
		<view class="dayList">
			<view v-for="(item, index) in dayList" :key="index" class="li" @click="confirm(item)">
				<view class="box" :class="item.month !== month?'wu':monthDay == item.classDate?'on':''">
					<view class="day">{{item.day}}</view>
					<view class="type" :class="item.isHave  == '1'?'you':''">{{item.isHave  == '1'?'有':'无'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				monthDay: '',
				month: '',
				monthStart: '',
				dayList: [],
				dayIndex: ''
			}
		},
		created() {
			this.monthDay = this.$app.formatTime(new Date()).slice(0, 10)
			this.month = this.$app.formatTime(new Date()).slice(0, 7)
			this.dayIndex = this.$app.formatTime(new Date()).slice(9, 10)
			this.getMonthStart()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getCourseTimeCalendar(begin, end) {
				this.$app.ajax({
					api: this.$api.courseTimeCalendar(),
					data: {
						param: {
							begin,
							end
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = [...res.recordList]
						arr.forEach(s=> {
							s.month = s.classDate.slice(0, 7)
							s.day = Number(s.classDate.slice(8, 10))
						})
						this.dayList = arr
						console.log(12321, this.monthDay)
					}
				}).catch(() => {})
			},
			getMonthStart() {
				const currentDate = new Date(this.monthDay);
				const y = currentDate.getFullYear();
				let m = currentDate.getMonth() + 1;
				m = m < 10 ? "0" + m : m; //月份补 0
				const monthStart = new Date([y, m, '01'].join("-"))
				var week = monthStart.getDay()
				if (week != 0) {
					monthStart.setDate(monthStart.getDate() - week)
				}
				this.monthStart = monthStart
				this.month = this.$app.formatTime(this.monthDay).slice(0, 7)
				this.getCourseTimeCalendar(this.$app.formatTime(monthStart), this.$app.formatTime(monthStart.setDate(monthStart.getDate() + 34)))
			},
			monthBtn(s) {
				if(s === 1) {
					var currentDate = new Date(this.monthDay); // 创建一个表示当前日期的Date对象
					currentDate.setMonth(currentDate.getMonth() - 1); // 将月份设置为上个月（注意这里需要先获取当前月份再进行计算）
					console.log("上个月的日期：" + this.$app.formatTime(currentDate).slice(0, 10));
				} else {
					var currentDate = new Date(this.monthDay); // 创建一个表示当前日期的Date对象
					currentDate.setMonth(currentDate.getMonth() + 1); // 将月份设置为下个月（同样需要先获取当前月份再进行计算）
					console.log("下个月的日期：" + this.$app.formatTime(currentDate).slice(0, 10));
				}
				this.monthDay = this.$app.formatTime(currentDate).slice(0, 10)
				this.getMonthStart()
				this.$emit('confirm', {
					fulldate: this.$app.formatTime(currentDate).slice(0, 10)
				})
			},
			confirm(item) {
				this.monthDay = item.classDate
				if(item.month !== this.month) {
					this.getMonthStart()
				}
				this.$emit('confirm', {
					fulldate: item.classDate
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx 0 30rpx;
	}

	.head {
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: Medium;
			color: #333333;
			margin: 0 20rpx;
		}
	}

	.weekList {
		display: flex;
		justify-content: space-around;
		align-items: center;
		line-height: 1;
		margin-top: 60rpx;

		view {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}
	}

	.dayList {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.li {
			margin-top: 20rpx;
			text-align: center;
			width: calc(100% / 7);
			display: flex;
			align-items: center;
			justify-content: center;

			.box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				line-height: 1.2;

				.day {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: Medium;
					color: #333333;
				}

				.type {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.you {
						color: $color;
					}
				}

				&.on {
					background-color: $color;

					.day,
					.type {
						color: #fff !important;
					}
				}

				&.wu {

					.day,
					.type {
						color: #CCCCCC !important;
					}
				}

			}


		}
	}
</style>